import React from "react"

import "@/components/common/ProviceMap/ProvinceMap.component.styl"

import ProvinceJsonHttpService from "@/service/ProvinceJsonHttp.service"

class ProvinceMap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            valueData: [
                {name: "黔西南布依族苗族自治州", value: 25},
                {name: "黔东南苗族侗族自治州", value: 25},
                {name: "黔南布依族苗族自治州", value: 25},
                {name: "六盘水市", value: 25},
                {name: "遵义市", value: 25},
                {name: "贵阳市", value: 25},
                {name: "毕节市", value: 25},
                {name: "安顺市", value: 25},
                {name: "铜仁市", value: 25}
            ]
        }
    }

    getProvinceData() {
        ProvinceJsonHttpService.querySingleProvinceJson({
            adcode: "520000"
        }).then(({data}) => {
            let {status, data: res} = JSON.parse(data);
            if (status === 200) {
                // let geoCoordMap = this.getGeoCoordMap(res.features);
                this.init(res);
            }
        }).catch(error => {
            console.log(error);
        })
    }

    getGeoCoordMap(features) {
        let properties = null, geoCoordMap = {};
        _.forEach(features, feature => {
            properties = feature.properties;
            geoCoordMap[properties.name] = properties.center;
        });
        return geoCoordMap;
    }

    init(feature) {
        echarts.registerMap("贵州", feature);
        let {id} = this.props.provinceData;
        let myChart = echarts.init(document.getElementById(`${id}-map-chart`));
        let option = {
            tooltip: {
                trigger: 'axis'
            },
            geo: {
                show: true,
                type: "map",
                map: "贵州",
                roam: true,
                scaleLimit: {
                    min: 1,
                    max: 3
                },
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: "#3c70ff",
                        borderColor: '#fff'
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    }
                }
            }
        };
        window.onresize = function () {
            myChart.resize();
        };
        myChart.setOption(option);
    }

    componentDidMount() {
        this.getProvinceData();
    }

    render() {
        return (
            <div id={`${this.props.provinceData.id}-map-chart`} className="province-map">

            </div>
        )
    }
}

export default ProvinceMap
